<template>
  <div class="realName">
    <div class="title">
        <i class="iconfont iconzuojiantou" @click="onClickLeft"></i>
        <span>{{theme}}</span>
        <i class="iconfont iconzuojiantou" style="color: white;"></i>
    </div>
    <div class="file">
        <div class="villageVerification">
            <span>真实姓名:</span>
            <div>
                <input type="text" placeholder="请输入真实姓名"  :style="verification" v-model="name">
            </div>
        </div>
        <div class="villageVerification">
            <span>身份证号:</span>
            <div>
                <input type="tel" placeholder="请输入您的身份证号" maxlength="18" onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')" :style="verification" v-model="codeNum">
            </div>
        </div>
    </div>
    <!-- <div class="upInfo">
        <h3>请上传身份信息</h3>
        <div class="imgs">
            <div class="one" v-show="ShowImg">
                <img src="../assets/realname/img1.png" v-if="urlImg == '' || urlImg == undefined?true:false">
                <img src="../assets/realname/img1.png" alt=""  ref="goodsImg">
                <input type="file" class="upFile" @change="ImgClick($event)" ref="inputer" multiple accept="image/png,image/jpeg,image/jpg" v-show="ShowImg"/>
                  <van-uploader  multiple :after-read="afterRead"  >
                   <img src="../assets/realname/img1.png"  ref="goodsImg" >
                </van-uploader>  
                <span>身份证正面</span>
            </div>
            <div class="one" v-show="ShowImg">
                <img src="../assets/realname/img2.png"  ref="goodsImg1">
                <img :src="urlImgOne" alt="" >
                <input type="file" class="upFile" @change="ImgClick1($event)" ref="inputerOne" multiple accept="image/png,image/jpeg,image/jpg" v-show="ShowImg"/>
                 <van-uploader  multiple :after-read="afterRead2"  >
                   <img src="../assets/realname/img2.png" ref="goodsImg2"  >
                </van-uploader>
                <span>身份证反面</span>
            </div>
            <div class="one" v-show="ShowImg">
                <img src="../assets/realname/img3.png"  ref="goodsImg2">
                <img :src="urlImgTwo" alt="" v-else>
                <input type="file" class="upFile" @change="ImgClick2($event)" ref="inputerTwo" multiple accept="image/png,image/jpeg,image/jpg" v-show="ShowImg"/>
                  <van-uploader multiple :after-read="afterRead3"  >
                   <img src="../assets/realname/img3.png" ref="goodsImg3"  >
                </van-uploader>
                <span>手持身份证</span>15093200204
            </div>
        </div>
    </div> -->
    <!-- 上传身份证 -->
      <div class="upInfo">
        <h3>请上传身份信息</h3>
        <div class="imgs">
            <div class="one"  v-show="ShowImg">
                 <div class="camera-Box" style="margin-right:0.15rem">
                    <img src="../assets/realname/img1.png" class="input-img" ref="goodsImg">
                    <input type="file" class="upFile" capture='camera'  @change="ImgClick($event)" ref="inputer" multiple accept="image/png,image/jpeg,image/gif,image/jpg"/>
                </div>
                 
                <span>身份证正面</span>
            </div>
            <div class="one"  v-show="ShowImg">
                <div class="camera-Box" style="margin-right:0.15rem" >
                    <img src="../assets/realname/img2.png" class="input-img" ref="goodsImg1">
                    <input type="file" class="upFile" capture='camera' @change="ImgClick1($event)" ref="inputer" multiple accept="image/png,image/jpeg,image/gif,image/jpg"/>
                </div>
                <span>身份证反面</span>
            </div>
            <div class="one"  v-show="ShowImg">
                 <div class="camera-Box" >
                    <img src="../assets/realname/img3.png" class="input-img" ref="goodsImg2" >
                    <input type="file" class="upFile" capture='camera' @change="ImgClick2($event)" ref="inputer" multiple accept="image/png,image/jpeg,image/gif,image/jpg"/>
                </div>
                <span>手持身份证</span>
            </div>
        </div>
    </div>
    <!-- 结束 -->
    <div class="tiaoli" v-if="IFshow">
        <van-checkbox v-model="checked" shape="square"></van-checkbox>
        <span @click="terms">请确认服务条款《村村通服务条款》</span>
    </div>
    <!-- @click="goTaskDetail" -->
    <div class="submit" @click="goTaskDetail" :style = "bottonMargin"> 
       {{auditing}}
    </div>
    <div class="txt" @click="openPhoneModel" v-if="IFshow">
        如果没有找到村庄请可以选择成为村长
        <i class="iconfont iconzuojiantou1"></i>
    </div>
    <!-- 一键拨打电话 -->
    <div class="phoneModel" v-show="phoneModel">
        <div class="phoneBox">
            <div class="top" @click="closePhoneModel">
                <i class="iconfont iconshanchuguanbicha"></i>
            </div>
            <div class="second">
                <i class="iconfont icondianhua"></i>
                <span>联系方式</span>
            </div>
            <div class="telNum">
                <span>+86</span><span>{{phoneNumber}}</span>
            </div>
            <div class="immit" @click="callPhone">
                立即拨打
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { Toast, Uploader, Loading } from "vant";
import base64 from "js-base64";
export default {
  name: "realName",
  data() {
    return {
      villageName: "请输入所在村庄", //村庄
      name: "", //名字
      codeNum: "", //身份证号
      checked: true,
      phoneModel: false, //一键拨打电话弹框
      vantIcon: true,
      phoneNumber: "",
      theme: "",
      //上传照片
      formData: new FormData(),
      imgs: {},
      imgLen: 0,
      //身份证照片
      urlImg: "",
      urlImgOne: "",
      urlImgTwo: "",

      DownListColor: "color:#999999",
      DownListStyle: "display: none",
      DownListHeight: "0rem",
      nearVillage: [], //村庄列表
      vid: "", //村庄Id

      auditing: "提交审核",
      tid: "", //详情任务id
      userid: "", //用户id
      ByValidation: "", //审核状态

      IFshow: true,
      bottonMargin: "",
      url: "",
      pathUrl: "",
      term: "",
      verification: "color:#999999",
      readonly: false,
      ShowImg: true,
    };
  },
  created() {},
  mounted() {
    this.loadComments();
    this.theme = this.$route.query.theme;
    // alert(this.$route.query.theme)
    this.pathUrl = this.$route.query.url;
    this.vid = this.$route.query.vid;
    if (this.$route.query.Seurl == false) {
      this.villageName = this.$route.query.villageName;
      this.DownListColor = "color:#333333";
    }
    this.name = this.$route.query.name;
    this.codeNum = this.$route.query.codeNum;
    this.urlImg = this.$route.query.urlImg;
    this.urlImgOne = this.$route.query.urlImgOne;
    this.urlImgTwo = this.$route.query.urlImgTwo;
    // this.PostList(); 暂不用
    this.openShowModel();
    this.url = window.domain;
    // 监听浏览器返回
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.goBack, false);
    }
  },
  destroyed() {
    // 销毁监听浏览器事件
    window.removeEventListener("popstate", this.goBack, false);
  },
  methods: {
   
    ImgClick(e) {
      var that = this;
      var fil = e.target.files[0];
      this.base(fil, function(base64Data, fileName) {
        that.qrCode = base64Data;
        that.imgFile = that.dataURLtoFile(base64Data, fileName);
        console.log("哈哈哈", that.imgFile);
        console.log(base64Data);
        that.$refs.goodsImg.src = base64Data;
         Toast("上传中,请等待")
        that.$axios
          .post("/cct/qny/baseImages", {
            base: base64Data
          })
          .then(res => {
            // alert('长度为1',JSON.stringify(res))
            if (res.data.code == 0) {
              that.urlImg = res.data.data;
            }
          })
          .catch(err => {
            // alert('错误',err)
          });
      });
    },
    ImgClick1(e) {
      var that = this;
      var fil = e.target.files[0];
      this.base(fil, function(base64Data, fileName) {
        that.qrCode1 = base64Data;
        that.imgFile = that.dataURLtoFile(base64Data, fileName);
        console.log("哈哈哈", that.imgFile);
        console.log(base64Data);
        that.$refs.goodsImg1.src = base64Data;
         Toast("上传中,请等待")
        that.$axios
          .post("/cct/qny/baseImages", {
            base: base64Data
          })
          .then(res => {
            // alert('长度为1',JSON.stringify(res))
            if (res.data.code == 0) {
              that.urlImgOne = res.data.data;
            }
          })
          .catch(err => {
            // alert('错误',err)
          });
      });
    },
    ImgClick2(e) {
      var that = this;
      var fil = e.target.files[0];
      this.base(fil, function(base64Data, fileName) {
        that.qrCode2 = base64Data;
        that.imgFile = that.dataURLtoFile(base64Data, fileName);
        console.log("哈哈哈", that.imgFile);
        console.log(base64Data);
        that.$refs.goodsImg2.src = base64Data;
        Toast("上传中,请等待")
        that.$axios
          .post("/cct/qny/baseImages", {
            base: base64Data
          })
          .then(res => {
            // alert('长度为1',JSON.stringify(res))
            if (res.data.code == 0) {
              that.urlImgTwo = res.data.data;
            }
          })
          .catch(err => {
            // alert('错误',err)
          });
      });
    },

    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      this.$refs.goodsImg.src = file.content;
      this.$axios
        .post("/cct/qny/baseImages", {
          base: file.content
        })
        .then(res => {
          console.log("上传图片", res);
          if (res.data.code == 0) {
            this.urlImg = res.data.data;
          }
        });
    },
    afterRead2(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      this.$refs.goodsImg2.src = file.content;
      this.$axios
        .post("/cct/qny/baseImages", {
          base: file.content
        })
        .then(res => {
          console.log("上传图片", res);
          if (res.data.code == 0) {
            this.urlImgOne = res.data.data;
          }
        });
    },
    afterRead3(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      this.$refs.goodsImg3.src = file.content;
      this.$axios
        .post("/cct/qny/baseImages", {
          base: file.content
        })
        .then(res => {
          console.log("上传图片", res);
          if (res.data.code == 0) {
            this.urlImgTwo = res.data.data;
          }
        });
    },
    loadComments() {
      var list = JSON.parse(localStorage.getItem("key"));
      this.userid = list.userId;
    },
    //返回
    onClickLeft() {
      console.log(this.pathUrl, this.$route.query.id);
      if (this.pathUrl == "/task") {
        this.$router.push("/task");
      } else if (this.pathUrl == "/Mymi") {
        this.$router.push("/Mymi");
      } else if (this.pathUrl == "/index") {
        this.$router.push("/index");
      } else if (this.pathUrl == "/signUp") {
        this.$router.push({
          path: "/signUp",
          query: { id: this.$route.query.id }
        });
      } else {
        this.$router.push("/MySet");
      }
      // this.$router.go(-1);
    },
    //下拉列表
    DownList() {
      if (this.DownListStyle == "display: none") {
        this.DownListStyle = "display: block";
        this.vantIcon = false;
        if (this.villageName === "请输入所在村庄") {
          this.villageName = "";
          this.DownListColor = "color:#333333";
        }
      } else {
        this.DownListStyle = "display: none";
        this.vantIcon = true;
        if (this.villageName == "") {
          this.villageName = "请输入所在村庄";
          this.DownListColor = "color:#999999";
        }
      }
    },
    //身份证验证
    getverification() {
      this.verification = "color:#333333";
    },
    //下拉村庄列表
    PostList() {
      this.$axios
        .post("/village/village/selectRecommendVillage", {})
        .then(data => {
          if (data.data.code == 0) {
            this.nearVillage = data.data.data.nearVillage;
          }
        });
    },
    GetDownList(id, name) {
      this.vid = id;
      this.villageName = name;
      this.DownListStyle = "display: none";
      this.vantIcon = true;
    },
    // 提交审核
    goTaskDetail() {
      if (this.ByValidation == 0) {
        Toast("正在审核中");
      } else if (this.ByValidation == 2 || this.ByValidation == 4) {
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

        if (this.name == "" || this.name == undefined) {
          Toast("请输入真实姓名");
        } else if (this.codeNum == "" || this.codeNum == undefined) {
          Toast("请输入身份证号");
        } else if (!reg.test(this.codeNum)) {
          Toast("身份证号格式不正确");
        } else if (this.urlImg == "" || this.urlImg == undefined) {
          Toast("请上传身份证正面");
        } else if (this.urlImgOne == "" || this.urlImgOne == undefined) {
          Toast("请上传身份证反面");
        } else if (this.urlImgTwo == "" || this.urlImgTwo == undefined) {
          Toast("请上传手持身份证正面");
        } else if (this.checked == false) {
          Toast("请先勾选服务条款");
        } else if (this.theme == "详情") {
          this.tid = this.$route.query.tid;
          // this.postDetails();
          this.PostDrealNameSystemetails();
        } else if (this.theme == "实名认证") {
          this.PostDrealNameSystemetails();
        } else {
          Toast("不跳转");
        }
      } else {
        Toast("审核成功");
      }
    },
    //审核状态
    openShowModel() {
      this.$axios
        .get("/user/auth/selectAuthUId?id=" + this.userid)
        .then(res => {
          console.log("审核状态", res);
          this.ByValidation = res.data.data;
          this.taskListUrl();
        });
    },
    //审核状态判断
    taskListUrl() {
      if (this.ByValidation == 0) {
        // Toast("正在审核中");
        this.auditing = "正在审核中";
        this.identification();
        this.DownListColor = "color:#333333";
        this.IFshow = false;
        this.bottonMargin = "margin-top: 1.5rem";
        this.verification = "color:#333333";
        this.readonly = "readonly";
        this.ShowImg = false;
      } else if (this.ByValidation == 2 || this.ByValidation == 4) {
        this.auditing = "提交审核";
        this.DownListColor = "color:#999999";
        this.IFshow = true;
        this.bottonMargin = "";
        this.verification = "color:#999999";
        this.readonly = "";
        this.ShowImg = true;
      } else {
        if (this.theme == "详情") {
          this.$router.push({
            path: "/taskDetails",
            query: { name: "任务详情", tid: this.tid }
          });
        } else {
          this.auditing = "审核成功";
          this.identification();
          this.DownListColor = "color:#333333";
          this.IFshow = false;
          this.bottonMargin = "margin-top: 1.5rem";
          this.verification = "color:#333333";
          this.readonly = "readonly";
          this.ShowImg = false;
        }
      }
    },
    //用户实名认证-个人详情
    identification() {
      this.$axios.get("/user/auth/selectCctUserAuthUId", {}).then(res => {
        // console.log("个人详情",res);
        this.villageName = res.data.data.vname;
        this.name = res.data.data.realName;
        this.codeNum = res.data.data.cardId;
        this.urlImg = res.data.data.cardFront;
        this.urlImgOne = res.data.data.cardRear;
        this.urlImgTwo = res.data.data.cardHand;
      });
    },
    //服务条款
    terms() {
      this.$router.push({
        path: "/TermsOfService",
        query: {
          type: "10",
          value: "服务条款",
          vid: this.vid,
          villageName: this.villageName,
          name: this.name,
          codeNum: this.codeNum,
          urlImg: this.urlImg,
          urlImgOne: this.urlImgOne,
          urlImgTwo: this.urlImgTwo,
          term: false,
          url: this.pathUrl
        }
      });
    },
    //实名制认证
    PostDrealNameSystemetails() {
      this.$axios
        .post("/user/auth/add", {
          // vId: this.vid,
          realName: this.name,
          cardId: this.codeNum,
          cardFront: this.urlImg,
          cardRear: this.urlImgOne,
          cardHand: this.urlImgTwo
        })
        .then(res => {
          console.log("+++++", res);
          if (res.data.code == 0) {
            Toast(res.data.msg);
            this.openShowModel();
             this.$refs.goodsImg.src=require("../assets/realname/img1.png");
            this.$refs.goodsImg1.src=require("../assets/realname/img2.png");
              this.$refs.goodsImg2.src=require("../assets/realname/img3.png");

          } else {
            Toast(res.data.msg);
          }
        });
    },
    //村长电话
    telephone() {
      this.$axios
        .post("/system/number/list", {
          id: 1
        })
        .then(res => {
          console.log("村长手机", res);
          this.phoneNumber = res.data.rows[0].phoneNumber;
        });
    },
    // 调用拨号功能
    callPhone(phoneNumber) {
      window.location.href = "tel://" + this.phoneNumber;
    },
    //关闭模态框
    closePhoneModel() {
      this.phoneModel = false;
    },
    //打开模态框
    openPhoneModel() {
      // console.log("但是v很多事v")
      this.phoneModel = true;
    },
    //通过DOM取文件数据，将图片压缩，并限制上传数量
    Add(event) {
      let inputDOM = this.$refs.inputer;
      // 通过DOM取文件数据
      this.fil = inputDOM.files;
      let oldLen = this.imgLen;
      let len = this.fil.length + oldLen;
      // console.log("fil",this.$refs.inputer.files)
      if (len > 1) {
        //   alert('最多可上传1张，您还可以上传'+(1-oldLen)+'张');
        return false;
      }
      for (let i = 0; i < this.fil.length; i++) {
        let size = Math.floor(this.fil[i].size / 1024);
        if (size > 5 * 1024 * 1024) {
          // alert('请选择5M以内的图片！');
          Toast("请选择5M以内的图片！");
          return false;
        }
        this.imgLen++;
        this.$set(
          this.imgs,
          this.fil[i].name + "?" + new Date().getTime() + i,
          this.fil[i]
        );
      }
      // console.log("打印imgs",this.imgs)
    },
    //通过DOM取文件数据，将图片压缩，并限制上传数量
    AddOne(event) {
      let inputDOM = this.$refs.inputerOne;
      // 通过DOM取文件数据
      this.fil = inputDOM.files;
      let oldLen = this.imgLen;
      let len = this.fil.length + oldLen;
      if (len > 1) {
        //   alert('最多可上传1张，您还可以上传'+(1-oldLen)+'张');
        return false;
      }
      for (let i = 0; i < this.fil.length; i++) {
        let size = Math.floor(this.fil[i].size / 1024);
        if (size > 5 * 1024 * 1024) {
          // alert('请选择5M以内的图片！');
          return false;
        }
        this.imgLen++;
        this.$set(
          this.imgs,
          this.fil[i].name + "?" + new Date().getTime() + i,
          this.fil[i]
        );
      }
      // console.log("打印imgs",this.imgs)
    },
    //通过DOM取文件数据，将图片压缩，并限制上传数量
    AddTwo(event) {
      let inputDOM = this.$refs.inputerTwo;
      // 通过DOM取文件数据
      this.fil = inputDOM.files;
      let oldLen = this.imgLen;
      let len = this.fil.length + oldLen;
      if (len > 1) {
        //   alert('最多可上传1张，您还可以上传'+(1-oldLen)+'张');
        return false;
      }
      for (let i = 0; i < this.fil.length; i++) {
        let size = Math.floor(this.fil[i].size / 1024);
        if (size > 5 * 1024 * 1024) {
          alert("请选择5M以内的图片！");
          return false;
        }
        this.imgLen++;
        this.$set(
          this.imgs,
          this.fil[i].name + "?" + new Date().getTime() + i,
          this.fil[i]
        );
      }
    },
    //上传身份证正面图片
    //通过DOM取文件数据，将图片压缩，并限制上传数量
    addImg(event) {
      this.Add(event);
      this.submit("urlImg");
    },
    //上传身份证反面图片
    addImgOne(event) {
      // console.log(event)
      this.AddOne(event);
      this.submit("urlImgOne");
    },
    //上传手持身份证图片
    addImgTwo(event) {
      // console.log(event)
      this.AddTwo(event);
      this.submit("urlImgTwo");
    },
    //上传图片
    submit(i) {
      for (let key in this.imgs) {
        let name = key.split("?")[0];
        this.formData.append("file", this.imgs[key], name);
      }
      // console.log("打印",this.formData)
      this.$axios.post("/cct/qny/uploading", this.formData).then(res => {
        console.log("图片", res);

        if (i == "urlImg") {
          this.qrCode = false;
          this.urlImg = res.data.data;
        }
        if (i == "urlImgOne") {
          this.qrCode1 = false;
          this.urlImgOne = res.data.data;
        }
        if (i == "urlImgTwo") {
          this.qrCode2 = false;
          this.urlImgTwo = res.data.data;
        }
        this.imgs = [];
        this.imgLen = 0;
        this.formData = new FormData();
      });
    },
    //监听返回键
    goBack() {
      if (this.pathUrl == "/task") {
        this.$router.push("/task");
      } else if (this.pathUrl == "/Mymi") {
        this.$router.push("/Mymi");
      } else if (this.pathUrl == "/index") {
        this.$router.push("/index");
      } else {
        this.$router.push("/MySet");
      }
    }
  }
};
</script>

<style lang="less" scoped>
.realName {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  font-size: 0;
  position: relative;
  .title {
    width: 100%;
    font-size: 0.36rem;
    color: #333;
    height: 1.25rem;
    line-height: 1.25rem;
    background-color: #fff;
    margin-bottom: 0.2rem;
    display: flex;
    justify-content: space-between;
    padding: 0 0.2rem;
    box-sizing: border-box;
  }
  .village {
    width: 100%;
    height: 0.87rem;
    background: white;
    .village-Box {
      width: 7.2rem;
      height: 0.87rem;
      line-height: 0.87rem;
      margin-left: 0.3rem;
      border-bottom: 0.02rem solid rgb(248, 248, 248);
      display: flex;
      position: relative;
      span {
        display: block;
        width: 1.2rem;
        height: 0.87rem;
        font-size: 0.28rem;
        color: #333333;
      }
      .villageBox-Text {
        width: 5.5rem;
        height: 0.87rem;
        padding-left: 0.6rem;
        color: #999999;
        font-size: 0.24rem;
      }
      .van-icon {
        line-height: 0.87rem;
      }
      .village-BoxText {
        width: 5rem;
        height: 1.74rem;
        position: absolute;
        top: 0.87rem;
        left: 1.55rem;
        z-index: 10;
        overflow: auto;
        font-size: 0.24rem;
        line-height: 0.5rem;
        span {
          display: block;
          width: 5rem;
          height: 0.5rem;
          background: #f8f8f8;
          color: #999999;
          padding-left: 0.2rem;
        }
      }
    }
  }
  .villageVerification {
    width: 100%;
    height: 0.87rem;
    line-height: 0.87rem;
    background: white;
    border-bottom: 0.02rem solid rgb(248, 248, 248);
    display: flex;
    position: relative;
    span {
      display: block;
      width: 1.2rem;
      height: 0.87rem;
      font-size: 0.28rem;
      color: #333333;
      margin-left: 0.3rem;
    }
    div {
      width: 6rem;
      height: 0.87rem;
      input {
        width: 6rem;
        height: 0.85rem;
        line-height: 0.85rem;
        color: #999999;
        font-size: 0.24rem;
        padding-left: 0.6rem;
      }
    }
  }
  .upInfo {
    margin-top: 0.1rem;
    font-size: 0.28rem;
    color: #333;
    padding: 0.3rem;
    box-sizing: border-box;
    background-color: #fff;
    .imgs {
      display: flex;
      justify-content: space-between;
      margin-top: 0.25rem;
      .one {
        text-align: center;
        position: relative;
        img {
          width: 2rem;
          height: 1.27rem;
          border-radius: 0.2rem;
          margin-bottom: 0.1rem;
        }
        span {
          display: block;
          font-size: 0.24rem;
          color: #333;
        }
      }
    }

    .upFile {
      width: 2rem;
      height: 1.27rem;
      border-radius: 0.2rem;
      opacity: 0;
      border: 1px solid red;
      position: absolute;
      top: 0;
      left: 0.15rem;
    }
  }
  .tiaoli {
    font-size: 0.24rem;
    color: #999;
    display: flex;
    justify-content: center;
    padding: 0.3rem 0 0.5rem 0;
    box-sizing: border-box;
    span {
      margin-left: 0.1rem;
      margin-top: 0.05rem;
    }
    .van-checkbox {
      transform: scale(0.7);
      border-radius: 0.1rem;
    }
  }
  .submit {
    width: 6.9rem;
    height: 0.8rem;
    background: rgba(56, 168, 63, 1);
    border-radius: 0.2rem;
    line-height: 0.8rem;
    text-align: center;
    font-size: 0.3rem;
    color: #fff;
    margin: 0 auto;
  }
  .txt {
    font-size: 0.24rem;
    color: #a4d6a7;
    width: 100%;
    text-align: center;
    margin-top: 0.3rem;
    i {
      font-size: 0.26rem;
    }
  }
  //一键拨打电话
  .phoneModel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    font-size: 0.26rem;
    .phoneBox {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      background-color: #fff;
      width: 6.5rem;
      height: 3.5rem;
      padding: 0.2rem 0.2rem 0.4rem 0.4rem;
      box-sizing: border-box;
      border-radius: 0.2rem;
      .top {
        text-align: right;
        i {
          font-size: 0.3rem;
        }
      }
      .second {
        width: 100%;
        text-align: center;
        margin: 0.2rem auto 0.4rem;
        font-size: 0.28rem;
        color: #222;
        i {
          color: #1184ef;
          font-size: 0.26rem;
        }
      }
      .telNum {
        text-align: center;
        font-size: 0.28rem;
        color: #222;
        span:nth-child(1) {
          margin-right: 0.1rem;
        }
      }
      .immit {
        width: 5rem;
        height: 0.84rem;
        background: rgba(56, 168, 63, 1);
        border-radius: 0.42rem;
        margin: 0 auto;
        color: #fff;
        font-size: 0.34rem;
        line-height: 0.84rem;
        text-align: center;
        margin-top: 0.4rem;
      }
    }
  }
}
</style>
<style lang="less">
.realName {
  width: 100%;
  .van-uploader__preview-image {
    width: 2rem !important;
    height: 1.27rem !important;
    border-radius: 0.2rem;
  }
  .van-button--normal {
    width: 2rem;
    height: 1.27rem !important;
    border-radius: 0.2rem;
    margin-right: 0.2rem;
  }
  .van-button--normal:last-child {
    margin-right: 0;
  }
  .upFile_tupe {
    margin-top: 0.2rem;
    text-align: center;
  }
  .van-uploader__upload {
    display: none;
  }
}
</style>
   

